<template>
  <div class='sidebar'>
    <div class='user_head'>
      <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
      <p>{{(user.userAccount)}}</p>
    </div>
    <el-menu
      :router="true"
      :default-active="'1'"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#18273b"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu :key="item.id" v-for="(item,index) in menus" :index="index + ''">
        <template slot="title">
          <i :class="handleIcon(item.config)"></i>
          <span>{{item.label}}</span>
        </template>
        <template v-if="item.children">
          <el-menu-item-group>
            <el-menu-item :route="item2.url" :disabled="item2.available === 0" :key="item2.id" v-for="(item2) in item.children" :index="item2.url">
              <i :class="handleIcon(item2.config)"></i><span>{{item2.label}}</span></el-menu-item>
          </el-menu-item-group>
        </template>

      </el-submenu>

    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  props: ['menus'],
  data() {
    return {
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    handleIcon(config) {
      try {
        let parse = JSON.parse(config)
        if (parse.icon) {
          return parse.icon
        }
      } catch (e) {
        console.error(e)
      }

      return 'el-icon-close'
    }
  },
  computed: {
    user() {
      let returnData
      if (sessionStorage.user) {
        returnData = JSON.parse(sessionStorage.user)
        return returnData
      }
      return { userAccount: '测试中' }
    }
  },
  created() {
    console.dir(this.menus)
  }
}
</script>

<style scoped>

  div.sidebar {
    width: 300px;
    background-color: #18273b;
    float: left;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 10px rgba(0,0,0,1);
    position: relative;
    z-index: 2;

  }

  div.sidebar ul {
    border: 0;
  }

  .sidebar > .user_head {
    margin-top: 75px;
    width: 300px;
    height: 280px;
    position: relative;
    color: #ffffff;
    font-size: 24px;
    text-align: center;
  }

  .sidebar > div.user_head:before {
    content: '';
    display: block;
    position: absolute;
    width: 300px;
    height: 280px;
    background-image: url(../../assets/img/user_head_bg.png);
    background-size: 300px 280px;
    opacity: .1;
  }

  .sidebar > .user_head > img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-top: 60px;
    margin-bottom: 30px;
  }

</style>
